<template>
	<view class="profile">
		<view class="user">
			<view class="user-left">
				<view class="user-logo" @tap="logoClick">
					<image :src="tokens.avatar" mode=""></image>
				</view>
				<view class="user-main">
					<view class="user-main-s">
						<view class="title" :class="tokens.username ? 'token-active' : ''">{{tokens.username ? tokens.username : 'Hi~'}}</view>
						<view class="desc" :class="tokens.nickname ? 'token-nick' : ''">{{tokens.nickname ? '用户名: '+tokens.nickname  : '您还没有登录呢'}}</view>
					</view>

				</view>
			</view>
			<view class="user-right"></view>
		</view>
		<view class="tab-control" v-if="!tokens.avatar">
			<view class="register" @tap="registerClick">注册</view>
			<view class="actives login" @tap="loginClick">登陆</view>
		</view>
		<view class="order">
			<view class="order-top">
				<view>我的订单</view>
			</view>
			<!-- #ifdef H5 -->
			<view class="order-main">
				<view @tap="orderClick(index)" class="order-main-item" v-for="(item, index) in orderIcons" :key="index">
					<view class="icons">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="order-main">
				<view @tap="orderClicks(index)" class="order-main-item" v-for="(item, index) in orderIcons" :key="index">
					<view class="icons">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<!-- <view>12</view> -->
		<view class="lists">
			<view @tap="listClick(item)" class="lists-item" v-for="(item, index) in list" :key="index">
				<view class="imgss">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="title">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tokens: {},
				orderIcons: [{
						icon: "/static/icons/icon-pay.png",
						name: '待付款'
					},
					{
						icon: "/static/icons/pay-done.png",
						name: '已付款'
					},
					{
						icon: "/static/icons/icon-car.png",
						name: '待收货'
					},
					{
						icon: "/static/icons/icon-done.png",
						name: '已收货'
					},
					{
						icon: "/static/icons/icon-back.png",
						name: '售后'
					},
				],
				list: [{
						icon: "/static/icons/save.png",
						name: '收藏'
					},
					{
						icon: "/static/icons/brand.png",
						name: '品牌'
					},
					{
						icon: "/static/icons/article.png",
						name: '文章'
					},
					{
						icon: "/static/icons/address.png",
						name: '地址'
					},
					{
						icon: "/static/icons/card.png",
						name: '卡包'
					},
					{
						icon: "/static/icons/cart2.png",
						name: '购物车'
					},
					{
						icon: "/static/icons/kf.png",
						name: '客服'
					},
					{
						icon: "/static/icons/about.png",
						name: '关于'
					}
				]
			}
		},
		methods: {
			logoClick() {
				uni.navigateTo({
					url: '/pages/profile/mine/mine'
				})
				console.log(2)
			},
			registerClick() {
				uni.navigateTo({
					url: '/pages/profile/register/register'
				})
			},
			loginClick() {
				console.log(12)
				uni.navigateTo({
					url: '/pages/profile/login/login'
				})
			},
			orderClick(index) {
				console.log(index)
				uni.navigateTo({
					url: '/pages/profile/orderpage/orderpage?status=' + index
				})
			},
			orderClicks(index) {
				console.log(index)
				uni.reLaunch({
					url: '/pages/profile/orderpage/orderpage?status=' + index
				})
			},
			listClick(item) {
				console.log(item.name)
				if (item.name == '地址') {
					uni.navigateTo({
						url: '/pages/address/address'
					})
				} else if (item.name == '收藏') {
					uni.navigateTo({
						url: '/pages/profile/collect/collect'
					})

				} else if (item.name == '购物车') {
					uni.navigateTo({
						url: '/pages/profile/cart/cart'
					})
					
				} else if (item.name == '卡包') {} else {
					uni.showToast({
						title: `${item.name}功能尚未开发`,
						icon: 'none'
					})
				}



			}

		},
		onLoad() {
			// this.tokens =uni.getStorageSync('tokens')
			// console.log(this.tokens, '21')
		},
		onShow() {
			if (uni.getStorageSync('tokens')) {
				console.log('有token')
				let tokens = uni.getStorageSync('tokens')
				console.log(tokens)
				this.tokens = tokens
				console.log(this.tokens)

			} else {
				uni.showModal({
					title: '未登录',
					content: '还没有登录, 请先登录!',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: '/pages/profile/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.profile {
		background-color: #F1ECE7;
		// height: 100%;
		height: 100vh;
		padding: 0 40rpx;
		// overflow: hidden;
		overflow: auto;
	}

	.token-active {
		font-size: 36rpx;
		font-weight: 700;
	}

	.token-nick {
		color: #AFAEAE;
		font-size: 26rpx;
	}

	.lists {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		margin-bottom: 20rpx;

		// padding-bottom: 20rpx;
		.lists-item {
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 70rpx;
			font-size: 28rpx;

			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(3),
				{
				padding-top: 70rpx;
			}

			.imgss {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.order {
		background-color: #fff;
		padding: 20rpx 40rpx;
		margin: 20rpx 0;

		.order-top {
			padding: 20rpx 0;
			border-bottom: 2rpx solid #DDDDDD;
			font-size: 28rpx;
		}

		.order-main {
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;

			.order-main-item {
				// flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;

				.icons {
					display: flex;
					justify-content: center;
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

	}

	.tab-control {
		display: flex;
		justify-content: center;
		margin: 40rpx 0;

		view {
			padding: 16rpx 59rpx;
			border: 2rpx solid #3D4C46;
			margin: 0rpx 30rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
		}

		.actives {
			background: #354E44;
			color: #fff;
		}
	}

	.user {
		margin-top: 60rpx;

		.user-left {
			display: flex;

			.user-logo {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: pink;
				margin-right: 32rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.user-main {
				display: flex;
				align-items: center;

				.user-main-s {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 24rpx;

					.title {
						margin-bottom: 12rpx;
					}
				}
			}
		}
	}
</style>
